<template>
  <div class='container'>
  <el-dialog
  :title="this.formModel.id?'修改目录':'新增目录'"
  :visible.sync="dialogVisible"
  width="400px"
  @close="dialogClose"
  >
 <el-form ref="form" size="small" label-width="80px" :model="formModel" :rules="formRules">
        <el-form-item label="所属学科" v-if="!$route.query.id" prop="subject">
          <el-select v-model="formModel.subject"  style="width:100%">
             <el-option v-for="item in subjects" :key="item.value"
             :label="item.label"
             :value="item.value">
             </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input placeholder="请输入目录名称" v-model="formModel.directoryName"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" v-if="!formModel.id" @click="addTags">确定添加</el-button>
        <el-button type="primary" v-if="formModel.id" @click="editTags">确定修改</el-button>
      </div>
</el-dialog>
  </div>
</template>

<script>
import { add, update } from '@/api/hmmm/directorys.js'
// 获取学科列表
import { simple as subjectList } from '@/api/hmmm/subjects'
export default {
  data () {
    return {
      subjects: [],
      dialogVisible: false,
      formModel: {
        id: null,
        subject: null,
        directoryName: ''
      },
      formRules: {
        subject: [
          { type: 'number', message: '请选择所属学科', tirgger: 'blur' }
        ],
        directoryName: [
          { required: true, message: '请输入目录名称', tirgger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 弹框关闭回调 重置表单校验结果
    dialogClose () {
      // 对整个表单进行重置
      this.$refs.form.resetFields()
    },
    // 取消
    cancel () {
      this.dialogVisible = false
      this.formModel.subject = null
      this.formModel.directoryName = ''
    },
    // 添加目录
    addTags () {
      const data = {
        subjectID: this.formModel.subject || Number(this.$route.query.id),
        directoryName: this.formModel.directoryName
      }
      add(data).then(res => {
        this.dialogVisible = false
        this.$emit('render')
        this.formModel.subject = null
        this.formModel.directoryName = ''
      })
    },
    // 修改目录
    editTags () {
      const params = {
        id: this.formModel.id,
        subjectID: this.formModel.subject,
        directoryName: this.formModel.directoryName
      }
      update(params).then(res => {
        this.dialogVisible = false
        this.$emit('render')
        this.formModel.subject = null
        this.formModel.directoryName = ''
      })
    },
    // 获取学科列表
    getSubject () {
      subjectList().then(res => {
        this.subjects = res.data
      })
    },
    // 弹框显示
    open () {
      this.dialogVisible = true
    },
    // 接收当前信息
    resize (params) {
      this.formModel.id = params.row.id
      this.formModel.subject = params.row.subjectID
      this.formModel.directoryName = params.row.directoryName
    }
  },

  mounted () {
    this.getSubject()
  }
}
</script>

<style scoped lang='scss'></style>
